<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/css/main.css">
    <title>编辑学生</title>
    <!-- Bootstrap core CSS -->
    <link href="/css/main.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/public/css/main.css" rel="stylesheet">
    <style>
        /* 整体增大字体大小 */
        body,
        label,
        input,
        button,
        a {
            font-size: 1.2em;
        }

        /* 设置页面整体背景为渐变浅蓝到白色 */
        body {
            background: linear-gradient(to bottom, lightblue, white);
        }

        /* 让输入框和按钮等在各自容器内居中显示 */
        .form-group {
            text-align: center;
        }

        /* 增大表单元素样式 */
        .form-control {
            width: 300px;
            padding: 15px;
        }

        /* 增大按钮样式 */
        .btn-default {
            width: 120px;
            padding: 10px 20px;
        }

        /* 调整性别相关元素布局，使其在同一行显示 */
        .gender-group {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .gender-group label {
            margin-right: 15px;
        }

        /* 调整表单内元素的垂直间距 */
        form div {
            margin-bottom: 15px;
        }

        /* 调整按钮所在行的布局，缩小按钮上下间距 */
        .row {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 0;
        }

        /* 进一步微调按钮的上下间距 */
        .row button {
            margin-bottom: 5px;
        }

        /* 调整取消按钮的样式 */
        a button {
            background-color: #ccc;
            color: #333;
        }
    </style>
</head>

<body>
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="/students">学生管理系统</a>
    </div>
    <div class="row">
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h2 class="sub-header">编辑学生</h2>
            <form action="/students/edit" method="post">

                <input type="hidden" name="id" value="{{ student.id }}">
                <div class="form-group">
                    <label for="">姓名</label>
                    <label for="1"></label><input type="text" class="form-control" id="1" name="name" required minlength="2" maxlength="10"
                                                  value="{{ student.name }}">
                </div>
                <div class="form-group">
                    <div class="gender-group">
                        <label for="">性别</label>
                        {{if student.gender==0 }}
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="2" value="0" checked> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="3" value="1"> 女
                        </label>
                        {{else }}
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="4" value="0"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="5" value="1" checked> 女
                        </label>
                        {{/if}}
                    </div>
                </div>
                <div class="form-group">
                    <label for="">年龄</label>
                    <label for="6"></label><input class="form-control" type="number" id="6" name="age" value="{{ student.age }}" required
                                                  min="1" max="150">
                </div>
                <div class="form-group">
                    <label for="">爱好</label>
                    <input class="form-control" type="text" id="" name="hobbies" value="{{ student.hobbies }}">
                </div>
                <div class="row">
                    <div class="col-md-5">
                        <button type="submit" class="btn btn-default">提交</button>
                    </div>
                    <div class="col-md-2" style="height: 20px">
                    </div>
                    <div class="col-md-5">
                        <a href="/students">
                            <button type="button" class="btn btn-default">取消</button>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

</html>